<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="区域搜索：">
          <el-input v-model="pageParams.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"><i class="el-icon-search" />  查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container">

      <div class="role-operate">
        <el-button class="newBuild" type="warning" @click="addAndEdit('add')">
          <i class="el-icon-circle-plus-outline" />
          新建</el-button>
      </div>

      <el-table :data="tableData">
        <!-- 放置列 -->
        <el-table-column prop="index" align="center" width="50px" label="序号" />
        <el-table-column prop="name" align="center" label="区域名称" />
        <el-table-column prop="nodeCount" align="center" width="80px" label="点位数" />
        <el-table-column prop="remark" align="center" label="备注说明" />
        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="details(row)"
            >查看详情</el-button>
            <el-button
              type="text"
              @click="addAndEdit('edit',row)"
            >修改</el-button>
            <el-button
              type="text"
              style="color:red"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="footer">
        <span>共{{ res.totalCount }}条记录  第 {{ res.pageIndex }}/{{ res.totalPage }} 页</span>
        <el-row type="flex" style="height:60px" align="middle" justify="end">
          <el-button :disabled="res.pageIndex <= 1" @click="redNum">上一页</el-button>
          <el-button :disabled="res.pageIndex===res.totalPage" @click="addNum">下一页</el-button>
        </el-row>
      </div>
    </div>
    <!-- 新建弹框 -->
    <el-dialog
      :title="drawerTitle"
      :visible.sync="showAddDialog"
      width="40%"
      style="font-weight: 700;"
    >
      <el-form ref="addForm" :model="region" :rules="rules" label-width="130px">
        <el-form-item prop="regionName" aria-placeholder="请输入" label="区域名称">
          <el-input
            v-model="region.regionName"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            style="width:380px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="remark" label="备注说明">
          <el-input
            v-model="region.remark"
            type="textarea"
            :rows="3"
            style="width:380px"
            placeholder="请输入备注 (不超过40字)"
            maxlength="40"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="14">
              <el-button class="cancle" @click="closeFn">取消</el-button>
              <el-button class="cofirm" type="warning" style="margin-left: 34px" @click="submit">确定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog
      title="区域详情"
      :visible.sync="showdetailDialog"
      width="40%"
      style="font-weight: 700;"
      class="aera"
    >
      <div class="aname">区域名称：{{ areaName }}</div>
      <div class="node">
        <span>包含点位：</span>
        <template>
          <el-table
            :data="AreaList"
            style="width: 70%;"
          >
            <el-table-column
              prop="index"
              label="序号"
              width="70"
            />
            <el-table-column
              prop="name"
              label="点位名称"
              width="180"
            />
            <el-table-column
              prop="vmCount"
              label="设备数量"
            />
          </el-table>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAreaList, addArea, getAreaDetail, EditArea, editConfirm, DeleteArea } from '@/api/node'
export default {
  name: 'Region',
  data() {
    return {
      AreaList: [],
      tableData: [],
      showAddDialog: false,
      showdetailDialog: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      rules: {
        regionName: [{ required: true, message: '区域名称名称不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      },
      res: '',
      // 表单
      region: {
        regionName: '',
        remark: ''
      },
      areaName: '',
      drawerType: ''
    }
  },
  computed: {
    drawerTitle() {
      if (this.drawerType === 'add') {
        return '新增区域'
      } else {
        return '修改区域'
      }
    }
  },
  async created() {
    this.getAreaList()
  },
  methods: {
    async delFn(id) {
      await DeleteArea(id)
      this.$message.success('删除成功')
      if (this.tableData.length === 1) this.pageParams.pageIndex--
      this.getAreaList()
    },
    async details(row) {
      this.areaName = row.name
      this.showdetailDialog = true
      // console.log(id)
      const res = await getAreaDetail(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        row.id
      )
      // console.log(res)
      this.AreaList = res.currentPageRecords
      this.AreaList.forEach((item, index) => { // 序号调整
        this.$set(item, 'index', this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1)
      })
    },
    async onSubmit() {
      this.getAreaList()
    },
    async getAreaList() {
      const res = await getAreaList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.pageParams.name
      )
      // console.log(res)
      this.res = res
      this.tableData = res.currentPageRecords
      this.tableData.forEach((item, index) => { // 序号调整
        this.$set(item, 'index', this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1)
      })
    },
    submit() {
      this.$refs.addForm.validate(async pass => {
        if (!pass) return
        this.showAddDialog = false
        if (!this.region.id) {
          await addArea({
            regionName: this.region.regionName,
            remark: this.region.remark
          })
          // console.log(res)
          this.$message.success('新增成功')
        } else {
          await editConfirm({
            regionName: this.region.regionName,
            remark: this.region.remark
          },
          this.region.id
          )
          this.$message.success('修改成功')
        }
        this.getAreaList()
        this.$refs.addForm.resetFields()
      })
    },
    // 数据回显
    async addAndEdit(type, row) {
      this.drawerType = type
      this.showAddDialog = true
      // console.log(row)
      if (row) {
        const res = await EditArea(row.id)
        // console.log(res)
        this.region.regionName = res.name
        this.region.remark = res.remark
        this.region.id = res.id
      }
    },
    addNum() {
      this.pageParams.pageIndex++
      this.getAreaList()
    },
    redNum() {
      this.pageParams.pageIndex--
      this.getAreaList()
    },
    closeFn() {
      this.showAddDialog = false
      this.$refs.addForm.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
 .container{
  width: 100%;
  height: 1050px;
  padding-left: 20px;
      .header{
    display: flex;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    margin-top: 20px;
    .demo-form-inline{
      margin-top: 20px;
    }
    }
  .app-container{
      width: 100%;
      height: 900px;
      .role-operate{
        margin-bottom: 15px;
        .newBuild{
          width: 80px!important;
          height: 36px;
          padding: 0;
          background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
          border: none;
          margin-left: 18px;
          margin-top: 20px;
        }
        .gdConfig{
          width: 80px!important;
          height: 36px;
          padding: 0;
          background-color: #fbf4f0!important;
          border: none;
          color: #655b56!important;
        }
      }
      .footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px 26px;
        span{
          font-size: 16px!important;
          color: #dbdfe5!important;
        }
        .el-button{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70px;
          height: 32px;
          margin: 0 16px;
          border-radius: 2px;
          background-color: #d5ddf8
        }
      }
      .dialogBody{
        display: flex;
        align-items: center;
        height: 36px;
        .diaText{
          font-size: 14px;
          font-weight: normal;
          color: #606266;
          margin-left: 20px;
        }
        .diaRight input{
            display: flex;
            width: 356px;
            height: 36px;
            line-height: 36px;
            margin-left: -40px;
            border-color: #d8dde3;
            border-radius: 4px;
            border: 1px solid #d8dde3;
            text-align: center;
        }
      }
  }
  .cancle {
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
    border-radius: 5px;
  }
  .cofirm{
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    border-radius: 5px;
  }
  .aera{
    .aname{
      margin-top: -10px;
      margin-left: 65px;
      margin-bottom: 30px;
      font-weight: normal;
    }
    .node{
      display: flex;
      margin-left: 65px;
      font-weight: normal;
      .el-table{
        font-weight: normal;
        margin-top: -15px;
      }
    }
  }
}
::v-deep .el-dialog{
  border-radius: 10px;
  }
</style>
